<template>
	<div>

		<div v-for="(item,index) in RankingSongs" class="NOstatus  flexRow ">
			<div class="NOlever ">NO.0{{index+1}}</div>
			<div class="NOname ">{{item.name}}</div>
		</div>

	</div>
</template>

<script>
	export default {
		props: {
			id: {
				type: Number
			}
		},
		name: "Rankinglist",
		data() {
			return {
				RankingSongs: []
			}
		},
		created() {

		},
		mounted() {
			this.getToplistDetail()
		},
		methods: {
			//获取榜单、歌单详情
			async getToplistDetail() {
				const {
					data: res
				} = await this.$http.get('/playlist/detail', {
					params: {
						id: this.id
					}
				})
				if(res.code!==200 ){
					this.$message.error('获取排行失败')
				}else{
					this.RankingSongs = res.playlist.tracks.slice(0,3)
					console.log(this.RankingSongs)
				}
				
			}
		}
	}
</script>

<style>
	.NOname {
		width: 100%;
		font-size: small;

	}

	.NOlever {
		width: 50px;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.NOstatus {
		z-index: 15;
		width: 204px;
		height: 21px;
		margin: 4px auto 2px 18px;
	}
</style>
